<script setup>
import messageApi from '@/apis/message'
import {onMounted, ref} from 'vue'

// 定义消息列表
const notifyList = ref([])
// 定义有无消息
const isEmpty = ref(false)
// 定义页数
const nextPage = ref(1)
// 定义每页的条数
const pageSize = ref(10)
// 定义每页条数
const hasMore = ref(true)
// 定义是否下拉加载完成
const isTriggered = ref(false)

// 获取司机端系统通知
const getNotifyList = async (page = 1,pageSize = 10)=>{
	const {code,data} = await messageApi.list(201,page,pageSize)
	if(code!==200) return uni.utils.toast('获取任务列表数据失败')
	// 判断page是否为1
	if(page === 1) notifyList.value = []
	// 渲染数据
	notifyList.value = [...notifyList.value,...data.items]
	// 判断是否为空数组
	isEmpty.value = notifyList.value.length === 0
	// 页码+1
	nextPage.value = ++ data.page
	// 判断有无全部加载完
	hasMore.value = nextPage.value <= data.pages
}
// 监听滚动到底部继续发送请求获取列表数据
const onScrollToLower = ()=>{
	if(!hasMore.value) return uni.utils.toast('没有更多数据了')
	getNotifyList(nextPage.value)
}
// 下拉刷新
const onRefresherrefresh = async ()=>{
	isTriggered.value = true
	await getNotifyList()
	isTriggered.value = false
}
// 处理全部已读
const onReadNotify = async () => {
	await messageApi.readAll(201)
	await getNotifyList()
}

onMounted(()=>{
	getNotifyList()
})

</script>
<template>
  <scroll-view 
  @scrolltolower="onScrollToLower" 
  @refresherrefresh="onRefresherrefresh"
  :refresher-triggered="isTriggered"
  class="scroll-view" 
  refresher-enabled 
  scroll-y
  >
    <view class="scroll-view-wrapper">
      <view class="message-action" @click="onReadNotify">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-card v-for="notify in notifyList" :key="notify.id" :border="false" :is-shadow="false">
        <view class="brief">{{notify.content}}</view>
        <view class="extra">
          <text class="time">{{notify.created}}</text>
          <navigator
            hover-class="none"
            class="link"
            url="/subpkg_task/detail/index"
            >查看详情</navigator
          >
        </view>
        <template v-slot:title>
          <view :class="{unread:notify.isRead === 0}" class="title">您有新的运输任务</view>
        </template>
      </uni-card>

      <view v-if="isEmpty" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
